<template>
  <div>姓名: {{name}}</div>
  <div>年龄：{{age}}</div>
  <div>计算的名字：{{userStore.fullName}}</div>
  <div>app的config：{{appStore.config}}</div>
  <div @click="updateUserState">更新数据</div>
</template>

<script setup lang="ts">
  import { useAppStore } from "@/store/app"
  import { useUserStore } from "@/store/user"
  import { storeToRefs } from 'pinia'
   
  const userStore = useUserStore()
  const appStore = useAppStore()
  
  console.log(useUserStore,'是一个方法')
  console.log(useUserStore.name,'useUserStore.name')
  console.log(useAppStore.name,'useAppStore.name') //输出的结果：useStore useAppStore.name
  
  //获取name的方式有两种,其一从计算属性中获取，其二，使用storeToRefs(userStore)
  //const name = computed(() =>userStore.name);
  const { name, age }= storeToRefs(userStore);

  //更新数据
  const updateUserState = () =>{
    const { name,age } = userStore.$state //访问state
    userStore.updateState({
      name: name+1,
      age:age+1
    })//访问updateState()
  }
  
</script>

<style lang="scss" scoped></style>
